<template>
  <div class="shop-auth-detail">
    <!-- 商户审核详情 -->
    <div class="container">
        <div class="info-title"><span>商户审核详情</span> <el-button @click="back" type="text">返回</el-button> </div>
        <div class="shop-info" v-loading="loading">
            <div class="shop_register_name">
                <span  v-html="shopInfo.shopRegisterName || shopInfo.shopName || '未设置'"></span>
            </div>
            <div v-if="!loading">
                <div class="shop-info-box">
                    <el-row :gutter="10">
                        <el-col :sm="8">
                            <div class="grid-content">
                                <div class="info-cell">
                                    <span class="info-label">商户号：</span>
                                    <span v-html="shopId"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">注册名称：</span>
                                    <span v-html="shopInfo.shopRegisterName || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">行业类别：</span>
                                    <span v-html="shopInfo.industryCategory || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">营业执照号：</span>
                                    <span v-html="shopInfo.shopIdNumber || '未设置'"></span>
                                </div>
                            </div>
                        </el-col>
                        <el-col :sm="8">
                            <div class="grid-content">
                                
                                <div class="info-cell" >
                                    <span class="info-label">商户联系人：</span>
                                    <span v-html="shopInfo.shopUserName || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">联系人电话：</span>
                                    <span v-html="shopInfo.shopUserPhone || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">联系人邮箱：</span>
                                    <span v-html="shopInfo.shopUserEmail || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">客服电话：</span>
                                    <span v-html="shopInfo.shopCustomerPhone || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">商户地址：</span>
                                    <span v-html="shopInfo.shopAddress || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">证件类型：</span>
                                    <span>身份证</span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">证件号码：</span>
                                    <span v-html="shopInfo.legalIdNumber || '未设置'"></span>
                                </div>
                                
                            </div>
                        </el-col>
                        <el-col :sm="8">
                            <div class="grid-content">
                                <div class="info-cell" >
                                    <span class="info-label">开 户 名：</span>
                                    <span v-html="shopInfo.settleAccountName || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">账户性质：</span>
                                    <span v-html="shopType[shopInfo.settleAccountType] || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">开户账号：</span>
                                    <span v-html="shopInfo.settleAccountNumber || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">银行预留号码：</span>
                                    <span v-html="shopInfo.bankPhone || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">开 户 行：</span>
                                    <span v-html="shopInfo.settleBank || '未设置'"></span>
                                </div>
                                <div class="info-cell" >
                                    <span class="info-label">开户支行：</span>
                                    <span v-html="shopInfo.settleBranchBank || '未设置'"></span>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                 </div>
                <el-row :gutter="10">
                    <el-col :sm="12"  >
                        <div class="grid-content">
                            <!-- 门头照 -->
                            <div>门头照</div>
                            <div class="info-img" v-if="shopInfo.merchantHeadPic">
                                <img :src="shopInfo.merchantHeadPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12" >
                         <div class="grid-content">
                            <!-- 	收银台照 -->
                            <div>	收银台照</div>
                            <div class="info-img" v-if="shopInfo.merchantChechPic">
                                <img :src="shopInfo.merchantChechPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :sm="12" >
                        <div class="grid-content">
                            <!-- 经营场所照 -->
                            <div>经营场所照</div>
                            <div class="info-img" v-if="shopInfo.otherPhotoThreePic" >
                                <img :src="shopInfo.otherPhotoThreePic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12"  >
                         <div class="grid-content">
                            <!-- 法人身份证正面照 -->
                            <div>法人身份证正面照</div>
                            <div class="info-img" v-if="shopInfo.identityFacePic">
                                <img :src="shopInfo.identityFacePic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                </el-row>


                 <el-row :gutter="10">
                    <el-col :sm="12"   >
                        <div class="grid-content">
                            <!-- 法人身份证反面照 -->
                            <div>法人身份证反面照</div>
                            <div class="info-img" v-if="shopInfo.identityBackPic">
                                <img :src="shopInfo.identityBackPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12"  >
                         <div class="grid-content">
                            <!-- 	开户许可证照 -->
                            <div>开户许可证照</div>
                            <div class="info-img" v-if="shopInfo.businessCardPic">
                                <img :src="shopInfo.businessCardPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :sm="12"  >
                        <div class="grid-content">
                            <!-- 营业执照照 -->
                            <div>营业执照照</div>
                            <div class="info-img" v-if="shopInfo.businessPic">
                                <img :src="shopInfo.businessPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12"  >
                         <div class="grid-content">
                            <!-- 结算人身份证正面照 -->
                            <div>结算人身份证正面照</div>
                            <div class="info-img" v-if="shopInfo.identityFaceCopyPic">
                                <img :src="shopInfo.identityFaceCopyPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :sm="12" >
                        <div class="grid-content" >
                            <!-- 	结算人身份证反面照 -->
                            <div>	结算人身份证反面照</div>
                            <div class="info-img" v-if="shopInfo.identityBackCpoyPic">
                                <img :src="shopInfo.identityBackCpoyPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12">
                         <div class="grid-content">
                            <!-- 手持身份证照片 -->
                            <div>手持身份证照片</div>
                            <div class="info-img" v-if="shopInfo.identityBodyPic">
                                <img :src="shopInfo.identityBodyPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :sm="12" >
                        <div class="grid-content" >
                            <!-- 非法人对私授权函 -->
                            <div>非法人对私授权函</div>
                            <div class="info-img" v-if="shopInfo.otherPhotoFourPic">
                                <img :src="shopInfo.otherPhotoFourPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12" >
                         <!-- 租房合同 -->
                         <div class="grid-content">
                              <div>租房合同</div>
                            <div class="info-img" v-if="shopInfo.otherPhotoTwoPic">
                                <img :src="shopInfo.otherPhotoTwoPic" alt="加载失败！" >
                            </div>        
                        </div>
                    </el-col>
                </el-row>

                 <el-row :gutter="10">
                    <el-col :sm="12" >
                        <div class="grid-content" >
                            <!-- 其他资料 -->
                            <div>其他资料</div>
                            <div class="info-img" v-if="shopInfo.otherPhotoPic">
                                <img :src="shopInfo.otherPhotoPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12" >
                         <!-- 内部前台照片 -->
                         <div class="grid-content">
                              <div>内部前台照片</div>
                            <div class="info-img" v-if="shopInfo.firstPhotoPic">
                                <img :src="shopInfo.firstPhotoPic" alt="加载失败！" >
                            </div>        
                        </div>
                    </el-col>
                </el-row>
                 <el-row :gutter="10">
                    <el-col :sm="12">
                        <div class="grid-content" >
                            <!-- 银行卡正面照片 -->
                            <div>银行卡正面照片</div>
                            <div class="info-img"  v-if="shopInfo.bankFrontPhotoPic">
                                <img :src="shopInfo.bankFrontPhotoPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12" >
                         <!-- 银行卡反面照片 -->
                         <div class="grid-content">
                              <div>银行卡反面照片</div>
                            <div class="info-img" v-if="shopInfo.bankReversePhotoPic">
                                <img :src="shopInfo.bankReversePhotoPic" alt="加载失败！" >
                            </div>        
                        </div>
                    </el-col>
                </el-row>
                 <el-row :gutter="10">
                    <el-col :sm="12">
                        <div class="grid-content" >
                            <!-- 商户场景照片 -->
                            <div>商户场景照片</div>
                            <div class="info-img" v-if="shopInfo.mchScenePhotoPic">
                                <img :src="shopInfo.mchScenePhotoPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12" >
                         <!-- 商户总分店关系证明 -->
                         <div class="grid-content">
                              <div>商户总分店关系证明</div>
                            <div class="info-img" v-if="shopInfo.relationshipPhotoPic">
                                <img :src="shopInfo.relationshipPhotoPic" alt="加载失败！" >
                            </div>        
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :sm="12" >
                        <div class="grid-content" >
                            <!-- 商户增值协议 -->
                            <div>商户增值协议</div>
                            <div class="info-img" v-if="shopInfo.merchantPhotoPic">
                                <img :src="shopInfo.merchantPhotoPic" alt="加载失败！" >
                            </div>      
                        </div>
                    </el-col>
                     <el-col :sm="12">
                         <div class="grid-content">
    
                        </div>
                    </el-col>
                </el-row>
            </div>
           

        </div>
        <div>
            <div class="auth-remark">
                <el-input rows="4" type="textarea" v-model="remark" placeholder="审核回执信息"></el-input>
                <div>
                  <div class="info-item" v-for="(item,index) in noteList" :key="index" v-html="item" @click="setNote4List(item)"></div>
                </div>
            </div>
            <el-row :gutter="10" class="btn-box">
                <el-col :sm="12" >
                    <div class="grid-content" >
                            <el-button style="width:200px;" @click="agreeAuth" type="success">审核通过</el-button>
                    </div>
                </el-col>
                    <el-col :sm="12" >
                        <div class="grid-content">
                            <el-button style="width:200px;" @click="rejectAuth" type="danger">审核拒绝</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>

  </div>
</template>

<script>
export default {
  name:'shop-detail',
  data () {
    return {
        shopId:null,
        remark:"",
        noteList:[
            "您的证件信息不一致，请重新上传审核",
            "保持像素清晰",
            "您的照片涉嫌PS，请重新上传"
        ],
        shopInfo:{
            shopRegisterName:null
        },
        loading:true,
        shopType:['','对公账户','对私账户']
    };
  },
  components: {},
  created() {
      this.init();
  },
  mounted() {},
  methods: {
      init(){
          this.loading = true;
          this.shopId = this.$route.params.shopId;
          let token = sessionStorage.getItem(1);
          let url = `user/shop/find/${token}`;
          let params = `roleId=1&shopId=${this.shopId}`;
          this.$Http.post(url,params).then(res=>{
              this.loading = false;
              if(res.data.resp_code === '000000'){
                  this.shopInfo = res.data.result.content[0];
              }else{
                  this.$message(res.data.resp_message)
              }
          }).catch(err=>{
              this.loading = false;
              this.$message("获取商户信息失败！")
          })
      },
      agreeAuth(){
          // 同意审核
          let params = `id=${this.shopInfo.id}&shop_id=${this.shopId}&status=5&verifyRemark='审核通过'`;
          this.submitAuth(params);
      },
      rejectAuth(){
          // 拒绝审核
          let remark = ``;
          if(!this.remark){
              remark = "审核未通过！"
          }else{
              remark = this.remark;
          }
          let params = `id=${this.shopInfo.id}&status=2&verifyRemark=${remark}&shop_id=${this.shopId}`;
          this.submitAuth(params);
      },
      submitAuth(params){
          let url = `user/shop/verify`;
          this.$Http.post(url,params).then(res=>{
              if(res.data.resp_code === "000000"){
                  this.$router.back();
                  this.$notify({
                    title: '提示',
                    message: "审核结果已提交！"
                 });
              }else{
                 this.$notify({
                    title: '提示',
                    message: res.data.resp_message
                 });
              }
          }).catch(err=>{
              this.$notify({
                    title: '提示',
                    message: "审核请求提交失败！"
            });
          })
      },
      setNote4List(info){
          this.remark = info;
      },
      back(){
          this.$router.back();
      }
  }
}
</script>
<style scoped>
.shop-auth-detail{
    box-sizing: border-box;
    padding: 20px;
}
.container{
  border: 1px solid #ededed;
}
.info-title{
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
  display: flex;
  justify-content: space-between;
}
.shop-info{
  padding: 20px;
  box-sizing: border-box;
}
.shop-info-box{
    padding-bottom: 20px;
    border-bottom: 1px solid #dbdbdb;
    margin-bottom: 20px;
}
.shop_register_name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    font-size: 20px;
    border-bottom: 1px solid #f5f5f5;
}
.info-cell{
    padding: 5px;
}
.info-item{
    padding: 0 20px;
    border-left: 4px solid #999;
    margin-top: 10px;
    cursor: pointer;
    background-color: #efefef;
}
.btn-box{
    text-align: center;
    padding-bottom: 40px;
}
.auth-remark{
    padding: 20px;
    border-top: 1px solid #dbdbdb;
}
.grid-content .info-img{
    width: 178px;
    height: 178px;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
    border: 1px solid #efefee;
}
.info-img>img{
    width: 100%;
    height: 100%;
}
</style>